<template>
  <el-autocomplete
    v-model="itemName"
    :fetch-suggestions="fetchSuggestions"
    value-key="itemName"
    :placeholder="placeholder"
    :disabled="disabled"
    placement="bottom"
    :popper-append-to-body="false"
  ></el-autocomplete>
</template>

<script>
import { projectListAll } from '@/api/person/project'

export default {
  name: 'ProjectCompleteSelect',
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currQueryString: '',
      projectList: [],
    }
  },
  computed: {
    itemName: {
      get() {
        if (!this.value) {
          this.projectList = []
        }
        return this.value
      },
      set(value) {
        this.$emit('input', value || '')
      }
    }
  },
  created() {
  },
  methods: {
    // 输入建议数据
    fetchSuggestions(queryString, callback) {
      if (!queryString) {
        this.currQueryString = ''
        callback([])
        return
      }
      if (this.currQueryString == queryString) {
        callback(this.projectList)
        return
      }
      this.currQueryString = queryString
      projectListAll({
        itemName: queryString,
      }).then(res => {
        this.projectList = res.data || []
        callback(this.projectList)
      }).catch(err => {})
    },
  }
}
</script>

<style scoped lang="scss">

</style>
